<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons-vue';
import { ArrowDropDownRound, PowerSettingsNewOutlined, SettingsOutlined } from '@vicons/material';
import { Icon } from '@vicons/utils';

defineOptions({
  name: 'LayoutHeader',
});

const emit = defineEmits<{
  (e: 'update:collapsed', collapsed: boolean): void;
}>();

const userStore = useUserStore();
const userInfo = userStore.userInfo;
const collapsed = ref<boolean>(false);

console.log(userInfo.account);
function onCollapsedClick() {
  collapsed.value = !collapsed.value;
  emit('update:collapsed', collapsed.value);
}
</script>

<template>
  <ALayoutHeader class="!bg-white !px-3">
    <div class="h-full flex justify-between items-center">
      <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="onCollapsedClick" />
      <MenuFoldOutlined v-else class="trigger" @click="onCollapsedClick" />
      <div class="flex items-center gap-x-2">
        <ADropdown :arrow="true">
          <div class="flex items-center cursor-pointer">
            {{ userInfo.avatar }}
            <AAvatar v-if="userInfo.avatar" :size="40" :src="userInfo.avatar" />
            <AAvatar v-else :size="40">
              {{ userInfo.nickname.slice(0, 1) }}
            </AAvatar>
            <Icon size="24" class="!text-secondary-title">
              <ArrowDropDownRound />
            </Icon>
          </div>
          <template #overlay>
            <AMenu>
              <AMenuItem>
                <div class="flex flex-row items-center gap-x-1">
                  <Icon size="18" class="text-secondary-title cursor-pointer">
                    <SettingsOutlined />
                  </Icon>
                  <span class="text-secondary-title">个人设置</span>
                </div>
              </AMenuItem>
              <AMenuDivider />
              <AMenuItem>
                <div class="flex flex-row items-center gap-x-1">
                  <Icon size="18" class="text-secondary-title cursor-pointer">
                    <PowerSettingsNewOutlined />
                  </Icon>
                  <span class="text-secondary-title">退出登录</span>
                </div>
              </AMenuItem>
            </AMenu>
          </template>
        </ADropdown>
      </div>
    </div>
  </ALayoutHeader>
</template>
